<template>
  <div class="container">
    <h1>综合日报</h1>
    <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="二号稠油联合处理站化学助剂处理台账" name="first">
        <div class="block">
          <el-card shadow="always">
            <span class="demonstration" style="font: bolder">日期:</span>
            <el-date-picker
              style="margin-left: 10px"
              v-model="paramDate"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
            <el-button type="primary" style="margin-left: 40px">查询</el-button>
          </el-card>
        </div>
        <el-card shadow="always" style="margin-top: 15px">
          <el-table :data="paginatedData" border stripe style="width: 100%">
            <el-table-column label="日期" width="120">
              <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.date }}</span>
              </template>
            </el-table-column>
            <el-table-column label="常规原油处理">
              <el-table-column label="处理液量(m³/d)" width="120">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.normOil001
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="原油脱出污水量(m³/d)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.normOil002
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="正相破乳剂(kg/d)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.normOil003
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="反相破乳剂(kg/d)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.normOil004
                  }}</span>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="SAGD密闭处理">
              <el-table-column label="处理液量(m³/d)" width="120">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.sagdSealed001
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="预处理剂加药量(kg/d)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.sagdSealed002
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="正相破乳剂加药量(kg/d)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.sagdSealed003
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="产油量(m³/d)" width="110">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.sagdSealed004
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="产水量(m³/d)" width="110">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.sagdSealed005
                  }}</span>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="SAGD循环液处理">
              <el-table-column label="除油沉降罐进液量(m³/d)" width="120">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.sagdRecycle001
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="净水剂(Kg/d)" width="110">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.sagdRecycle002
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="絮凝剂(Kg/d)" width="110">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.sagdRecycle003
                  }}</span>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="污水处理">
              <el-table-column label="反应器处理水量(m³/d)" width="120">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.foulWater001
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="过滤器出水量(m³/d)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.foulWater002
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="污水进调储罐量(m³/d)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.foulWater003
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="1-5#反应器处理水量(m³/d)" width="110">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.foulWater004
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="6#反应器处理水量(m³/d)" width="110">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.foulWater005
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="1-5#净水剂(L/d)" width="110">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.foulWater006
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="3000方净水剂加药量(L/d)" width="110">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.foulWater007
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="1#-5#絮凝剂(L/d)" width="110">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.foulWater008
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="6#絮凝剂(L/d)" width="110">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.foulWater009
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="除硅反应器水量(m³/d)" width="110">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.foulWater010
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="除硅预处理剂(L/d)" width="110">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.foulWater011
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="除硅剂(L/d)" width="110">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.foulWater012
                  }}</span>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="污泥处理">
              <el-table-column label="叠螺机处理量(m³/d)" width="120">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.mud001 }}</span>
                </template>
              </el-table-column>
              <el-table-column label="叠螺机加药量(kg/d)" width="110">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.mud002 }}</span>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="常规原油处理">
              <el-table-column label="正相加药浓度(mg/L)" width="120">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.normOilProcess001
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="反相加药浓度(mg/L)" width="110">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.normOilProcess002
                  }}</span>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="SAGD密闭处理站">
              <el-table-column label="预处理剂浓度(mg/L)" width="120">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.sagdSealedProcess001
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="正相破乳剂加药浓度(mg/L)" width="110">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.sagdSealedProcess002
                  }}</span>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="SAGD循环液处理">
              <el-table-column label="净水剂加药浓度(mg/L)" width="120">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.sagdRecycleProcess001
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="絮凝剂加药浓度(mg/L)" width="110">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.sagdRecycleProcess002
                  }}</span>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="污水处理">
              <el-table-column label="1-5#净水剂浓度40%(mg/L)" width="120">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.foulWaterProcess001
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="3000方净水剂加药浓度40%(mg/L)"
                width="110"
              >
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.foulWaterProcess002
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="1#-5#助凝剂浓度(mg/L)0.3%" width="120">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.foulWaterProcess003
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="6#助凝剂浓度(mg/L)0.3%" width="110">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.foulWaterProcess004
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="除硅预处理剂(mg/L)" width="120">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.foulWaterProcess005
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="除硅剂浓度(mg/L)" width="110">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.foulWaterProcess006
                  }}</span>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="污泥处理">
              <el-table-column label="离心机加药浓度(mg/L)0.2%" width="120">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.mudProcess001
                  }}</span>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="水质净化">
              <el-table-column label="液体加药量m³/d" width="120">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.waterPurification001
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="配药清水用量m³/d" width="110">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.waterPurification002
                  }}</span>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="除硅处理">
              <el-table-column label="液体加药量m³/d" width="120">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.siliconRemoval001
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="配药清水用量m³/d" width="110">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.siliconRemoval002
                  }}</span>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="成本管控">
              <el-table-column label="成本管控原油脱出污水量(m³)" width="120">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.costControl001
                  }}</span>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="操作" width="140">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="primary"
                  plain
                  @click="handleEdit(scope.$index, scope.row)"
                  >保存
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
        <div class="block">
          <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            :total="totalItems"
            @current-change="handlePageChange"
            @size-change="handleSizeChange"
          ></el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="MVC高含盐深度处理" name="second">
        <div class="block">
          <el-card shadow="always">
            <span class="demonstration" style="font: bolder">日期:</span>
            <el-date-picker
              style="margin-left: 10px"
              v-model="paramDate"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
            <el-button type="primary" style="margin-left: 40px">查询</el-button>
          </el-card>
        </div>
        <el-card shadow="always" style="margin-top: 15px">
          <el-table :data="paginatedMvcData" border stripe style="width: 100%">
            <el-table-column label="日期" width="120">
              <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.date }}</span>
              </template>
            </el-table-column>
            <el-table-column label="处理水量(m³/d)" width="120">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.mvc001 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="净化软化水量(m³/d)" width="150">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.mvc002 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="高温膜+宇澄排污水量(m³/d)" width="150">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.mvc003 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="碱液加药量(Kg/d)" width="150">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.mvc004 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="产水量(m³/d)" width="150">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.mvc005 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="浓水量(m³/d)" width="150">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.mvc006 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="来水电导率(μs/cm)" width="150">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.mvc007 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="产水电导率(μs/cm)" width="150">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.mvc008 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="产水率%" width="150">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.mvc009 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="碱液浓度(mg/l)" width="150">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.mvc010 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="矿化度＜50mg/l" width="150">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.mvc011 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="产水率(浓水反算）" width="150">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.mvc012 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="碱液送药量(t)" width="150">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.mvc013 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="140">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="primary"
                  plain
                  @click="handleEdit(scope.$index, scope.row)"
                  >保存
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
        <div class="block">
          <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            :current-page="mvcCurrentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="mvcPageSize"
            :total="mvcTotalItems"
            @current-change="mvchandlePageChange"
            @size-change="mvchandleSizeChange"
          ></el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="新奥达油水回收处理" name="third">
        <div class="block">
          <el-card shadow="always">
            <span class="demonstration" style="font: bolder">日期:</span>
            <el-date-picker
              style="margin-left: 10px"
              v-model="paramDate"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
            <el-button type="primary" style="margin-left: 40px">查询</el-button>
          </el-card>
        </div>
        <el-card shadow="always" style="margin-top: 15px">
          <el-table
            :data="paginatednewOdData"
            border
            stripe
            style="width: 100%"
          >
            <el-table-column label="日期" width="240">
              <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.date }}</span>
              </template>
            </el-table-column>
            <el-table-column label="新奥达处理量(m3/d)" width="270">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.newOd001 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="新奥达加药量(t/d)" width="270">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.newOd002 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="新奥达加药浓度(mg/L)" width="280">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.newOd003 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="新奥达回水量(m3/d)" width="270">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.newOd004 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="新奥达回油量(m3/d)" width="270">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.newOd005 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="140">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="primary"
                  plain
                  @click="handleEdit(scope.$index, scope.row)"
                  >保存
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
        <div class="block">
          <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            :current-page="newOdCurrentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="newOdPageSize"
            :total="newOdTotalItems"
            @current-change="newOdhandlePageChange"
            @size-change="newOdhandleSizeChange"
          ></el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
const calculationConfig = {
  normOil001: "sum",
  normOil002: "sum",
  normOil003: "sum",
  normOil004: "sum",
  sagdSealed001: "sum",
  sagdSealed002: "sum",
  sagdSealed003: "sum",
  sagdSealed004: "sum",
  sagdSealed005: "sum",
  sagdRecycle001: "sum",
  sagdRecycle002: "sum",
  sagdRecycle003: "sum",
  foulWater001: "sum",
  foulWater002: "sum",
  foulWater003: "sum",
  foulWater004: "sum",
  foulWater005: "sum",
  foulWater006: "sum",
  foulWater007: "sum",
  foulWater008: "sum",
  foulWater009: "sum",
  foulWater010: "sum",
  foulWater011: "sum",
  foulWater012: "sum",
  mud001: "sum",
  mud002: "sum",
  normOilProcess001: "average",
  normOilProcess002: "average",
  sagdSealedProcess001: "average",
  sagdSealedProcess002: "average",
  sagdRecycleProcess001: "average",
  sagdRecycleProcess002: "average",
  foulWaterProcess001: "average",
  foulWaterProcess002: "average",
  foulWaterProcess003: "average",
  foulWaterProcess004: "average",
  foulWaterProcess005: "average",
  foulWaterProcess006: "average",
  mudProcess001: "average",
  waterPurification001: "sum",
  waterPurification002: "sum",
  siliconRemoval001: "sum",
  siliconRemoval002: "sum",
  costControl001: "sum",
};
const mvcCalculationConfig = {
  mvc001: "sum",
  mvc002: "sum",
  mvc003: "sum",
  mvc004: "sum",
  mvc005: "sum",
  mvc006: "sum",
  mvc007: "average",
  mvc008: "average",
  mvc009: "average",
  mvc010: "average",
  mvc011: "average",
  mvc012: "average",
  mvc013: "sum",
};
const newOdCalculationConfig = {
  newOd001: "sum",
  newOd002: "sum",
  newOd003: "average",
  newOd004: "sum",
  newOd005: "sum",
};
export default {
  data() {
    return {
      activeName: "first",
      currentPage: 1, // 当前页码
      mvcCurrentPage: 1, // mvc当前页码
      newOdCurrentPage: 1, // 新奥达当前页码
      pageSize: 10, // 每页显示的数据条数
      mvcPageSize: 10, // mvc每页显示的数据条数
      newOdPageSize: 10, // mvc每页显示的数据条数
      paramDate: ["2024-11-01", "2024-11-08"],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      tableData: [
        {
          date: "2016-05-02",
          normOil001: 9731,
          normOil002: 8960,
          normOil003: 1283,
          normOil004: 925,
          sagdSealed001: 10414,
          sagdSealed002: 997,
          sagdSealed003: 938,
          sagdSealed004: 1655,
          sagdSealed005: 8759,
          sagdRecycle001: 0,
          sagdRecycle002: 0,
          sagdRecycle003: 0,
          foulWater001: 20129,
          foulWater002: 25468,
          foulWater003: 6528,
          foulWater004: 21000,
          foulWater005: 6953,
          foulWater006: 13300,
          foulWater007: 0,
          foulWater008: 0,
          foulWater009: 0,
          foulWater010: 0,
          foulWater011: 10819,
          foulWater012: 94000,
          mud001: 737,
          mud002: 0,
          normOilProcess001: 132,
          normOilProcess002: 52,
          sagdSealedProcess001: 96,
          sagdSealedProcess002: 90,
          sagdRecycleProcess001: 0,
          sagdRecycleProcess002: 0,
          foulWaterProcess001: 633,
          foulWaterProcess002: 0,
          foulWaterProcess003: 0,
          foulWaterProcess004: 0,
          foulWaterProcess005: 795,
          foulWaterProcess006: 1728,
          mudProcess001: 0,
          waterPurification001: 118,
          waterPurification002: 0,
          siliconRemoval001: 118,
          siliconRemoval002: 94,
          costControl001: 17719,
        },
      ],
      mvcTableData: [
        {
          date: "2016-05-02",
          mvc001: 3503,
          mvc002: 3089,
          mvc003: 414,
          mvc004: 2640,
          mvc005: 3258,
          mvc006: 459,
          mvc007: 12000,
          mvc008: 32,
          mvc009: 0.92,
          mvc010: 754,
          mvc011: 28,
          mvc012: 0.87,
          mvc013: 0,
        },
      ],
      newOdTableData: [
        {
          date: "2016-05-02",
          newOd001: 160,
          newOd002: 5,
          newOd003: 0,
          newOd004: 275,
          newOd005: 0,
        },
      ],
    };
  },
  mounted() {},
  created() {
    // 调用方法，生成更多数据，例如添加10条
    this.addMoreData(56);
  },
  beforeDestroy() {},
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    // 处理页码变更
    handlePageChange(page) {
      this.currentPage = page;
    },
    // mvc处理页码变更
    mvchandlePageChange(page) {
      this.mvcCurrentPage = page;
    },
    // newOd处理页码变更
    newOdhandlePageChange(page) {
      this.newOdCurrentPage = page;
    },
    // 处理每页条数变更
    handleSizeChange(size) {
      this.pageSize = size;
      this.currentPage = 1; // 重置为第一页
    },
    // mvc处理每页条数变更
    mvchandleSizeChange(size) {
      this.mvcPageSize = size;
      this.mvcCurrentPage = 1; // 重置为第一页
    },
    // newOd处理每页条数变更
    newOdhandleSizeChange(size) {
      this.newOdPageSize = size;
      this.newOdCurrentPage = 1; // 重置为第一页
    },
    addMoreData(repeatCount) {
      // 获取现有的数据作为模板
      const templateData = this.tableData[0];
      const templateData2 = this.mvcTableData[0];
      const templateData3 = this.newOdTableData[0];
      // 添加指定数量的重复数据
      for (let i = 1; i <= repeatCount; i++) {
        const newData = { ...templateData };
        const newData2 = { ...templateData2 };
        const newData3 = { ...templateData3 };
        // 更新日期或其他字段，以使每条数据项有所区别
        newData.date = `2016-05-${(i + 2).toString().padStart(2, "0")}`;
        newData2.date = `2016-05-${(i + 2).toString().padStart(2, "0")}`;
        newData3.date = `2016-05-${(i + 2).toString().padStart(2, "0")}`;
        this.tableData.push(newData);
        this.mvcTableData.push(newData2);
        this.newOdTableData.push(newData3);
      }
      this.addSummaryRow(this.tableData, calculationConfig);
      this.addSummaryRow(this.mvcTableData, mvcCalculationConfig);
      this.addSummaryRow(this.newOdTableData, newOdCalculationConfig);
    },
    addSummaryRow(tableData, calculationConfig) {
      const summaryRow = { date: "全年合计" };
      // 动态获取需要计算的列名（排除 'date' 列）
      const columns = Object.keys(tableData[0]).filter(
        (column) => column !== "date"
      );
      // 遍历每列，按配置计算总和或平均值
      columns.forEach((column) => {
        const isSum = calculationConfig[column] === "sum";
        const total = tableData.reduce((sum, row) => {
          return sum + (row[column] || 0);
        }, 0);
        // 如果是求和，直接使用总和；如果是求平均，使用总和除以行数
        const result = isSum ? total : total / tableData.length;
        // 保留两位小数并转为数值
        summaryRow[column] = parseFloat(result.toFixed(2));
      });
      // 将合计行添加到表格数据
      tableData.push(summaryRow);
    },
  },
  computed: {
    // 总数据量
    totalItems() {
      return this.tableData.length;
    },
    mvcTotalItems() {
      return this.mvcTableData.length;
    },
    newOdTotalItems() {
      return this.newOdTableData.length;
    },
    // 分页后的数据
    paginatedData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = this.currentPage * this.pageSize;
      return this.tableData.slice(start, end);
    },
    // mvc分页后的数据
    paginatedMvcData() {
      const start = (this.mvcCurrentPage - 1) * this.mvcPageSize;
      const end = this.mvcCurrentPage * this.mvcPageSize;
      return this.mvcTableData.slice(start, end);
    },
    // newOd分页后的数据
    paginatednewOdData() {
      const start = (this.newOdCurrentPage - 1) * this.newOdPageSize;
      const end = this.newOdCurrentPage * this.newOdPageSize;
      return this.newOdTableData.slice(start, end);
    },
  },
};
</script>
<style scoped lang="scss">
.el-table_row .warning-row {
  background-color: red;
}

h1 {
  color: rgb(104, 224, 223);
  margin-bottom: 20px;
  margin-top: 20px;
  margin-left: 20px;
}
/* .container{
  height: 100vh;
} */
.table-content {
  border: 3px solid rgb(30, 94, 158);
  width: 93%;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 50px;
  /* margin:80px auto; */
  // height: 95vh;
  // overflow: auto;
}
.container {
  /* max-width: 600px;   */
  background-color: rgb(2, 16, 79);
  height: 100vh;
  overflow-x: auto; /* 设置横向滚动 */
  white-space: nowrap; /* 防止内容自动换行 */
}
.el-table {
  // overflow: auto;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 20px;
  margin-bottom: 20px;

  /* height: 2000px; */
  border-color: #f0f0f0;
  border-width: 2px;

  /* background-color: red; */
}
</style>
